<template>
<div>
  <el-form ref="form" :model="form" label-width="150px">
    <el-form-item label="主机名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="可见名称">
      <el-input v-model="form.displayName"></el-input>
    </el-form-item>
    <el-form-item :label="interfaceMap.name">
      <el-form :model="form">
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">IP地址</el-input></div></el-col>
          <el-col :span="22">
            <div class="grid-content bg-purple"><el-input v-model="form.ip"></el-input></div>
          </el-col>
        </el-row>
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">DNS名称</el-input></div>
          </el-col>
          <el-col :span="22">
            <div class="grid-content bg-purple">
              <el-input v-model="form.dns"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">连接到</el-input></div></el-col>
          <el-col :span="22">
            <div class="grid-content bg-purple">
              <el-radio-group v-model="form.useip" size="small">
                <el-radio-button label="1">IP地址</el-radio-button>
                <el-radio-button label="0">DNS</el-radio-button>
              </el-radio-group>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2"><div class="grid-content bg-purple label-color">端口</el-input></div></el-col>
          <el-col :span="22">
            <div class="grid-content bg-purple">
              <el-input v-model="form.port"></el-input>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-form-item>
    </el-form-item>
    <el-form-item label="描述">
      <el-input type="textarea" v-model="form.description"></el-input>
    </el-form-item>
  </el-form>
  <!-- <el-steps :space="100" :active="active" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
  </el-steps>
  <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
  <el-button type="success" style="margin-left: 100px;margin-top: 10px;" @click="createHost">创建</el-button>
  <el-button type="primary" style="margin-left: 10px;margin-top: 10px;" @click="cancle">取消</el-button>
</div>
</template>

<script>
import com from 'common/resTypeEnum'
import api from 'api/device'
export default {
  name: 'createHost',
  data() {
    return {
      interfaceMap: {
        name: 'agent代理的程序接口',
        id: '1'
      },
      form: {
        name: '',
        displayName: '',
        description: '',
        ip: '127.0.0.1',
        dns: '',
        useip: '1',
        port: '10050'
      }
    }
  },
  props: {
    selectTemplate: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  mounted() {
    this.initInterfaceMap();
  },
  methods: {
    initInterfaceMap() {
      this.interfaceMap = com.getHostInterfaceRes(this.selectTemplate.app.name)
    },
    createHost() {
      // console.log("interface start: ", this.interfaceMap);
      // console.log("selectTemplate: ", this.selectTemplate);
      var self = this;
      var host = {
        groupId: this.selectTemplate.app.id,
        templateId: this.selectTemplate.template.templateid,
        type: this.interfaceMap.id,
        name: this.form.name,
        description: this.form.description,
        ip: this.form.ip,
        dns: this.form.dns,
        useip: this.form.useip,
        port: this.form.port
      };

      api.createHost(host).then((response) => {
        if (response.status == 200) {
          if (response.data.error != null) {
            self.$message({
              message: '创建失败，' + response.data.error.data,
              type: 'error'
            });
            return;
          }
          self.$message('创建成功');
        } else {
          self.$message('创建失败');
        }
      }).catch((err) =>{
          console.error(err);
      }), response => {
        self.$message('创建失败！');
      };
    },
    cancle() {
      this.$emit('cancleCreateHost', "取消创建");
    }
  }
}
</script>

<style scoped>
.label-color {
  color: #48576a!important
}
.row-pos {
  margin-bottom: 10px;
}
</style>
